<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="setNum(2)">{{num}}</button>
    <hr/>
    <one :num="num" :set-num="setNum"></one>
    <hr/>
    <two :num="num" @suibian="setNum"></two>
    <hr/>
    <three :num="num" @zi-ding-yi="setNum(100)"></three>
</div>
</body>
<script>
    // 自定义事件如何定义？
    // 可以在使用组件时增加属性： @自定义事件的名字=“函数名/语句”
    // 如何调用？在组件中通过this.$emit('事件名字',参数1，参数2，。。。);
    new Vue({
        el: "#root",
        data:{
            num:100
        },
        methods:{
            setNum(num,a,b,c){
                console.log(num,a,b,c)
                this.num += num;
            }
        },
        components:{
            One:{
                props:["num","setNum"],
                template:(`
				    <button @click="setNum(3)">{{num}}</button>
				`)
            },
            Two:{
                props:["num"],
                methods:{
                    fn(){
                        // 第一个参数是自定义事件的名字，第二个参数开始是传递的参数
                        this.$emit("suibian",10,20,30,40)
                    }
                },
                template:(`
				    <button @click="fn">{{num}}</button>
				`)
            },
            Three:{
                props:["num"],
                // 注意：如果自定义事件已经绑定了参数，那么在调用事件时传递的参数无效
                template:(`
				    <button @click="$emit('zi-ding-yi',1,2,3,4,5)">{{num}}</button>
				`)
            }
        }
    })
</script>
</html>